<!--
 * @Company      : 云集数字科技（山东）股份有限公司
 * @Author       : Lem clownpro@163.com
-->
<template>
  <div class="home-container">
    <div class="home-content">
      <div class="home-title">{{ configInfo.init_name }}</div>
      <div class="home-money">
        <div class="money-box">
          <Vue3Countup :number="surplusMoney" :moreOptions="moreOptions" />
          <!-- {{ typeFilter(UNIT_LIST, configInfo.init_money_unit) }} -->
        </div>
      </div>
      <div class="home-unit">{{ typeFilter(UNIT_LIST, configInfo.init_money_unit) }}</div>
    </div>

    <!-- <div class="home-record">
      <TransitionGroup name="list" tag="div" class="record-list" :style="{ 'margin-top': `-${42 * (configRecords.length > 5 ? configRecords.length - 9 : 0)}px` }">
        <div v-for="item in configRecords" :key="item.id" class="home-record-item">
          <span class="item-name">{{ item.record_client }}</span>
          <span class="item-money">{{ item.record_money }}{{ typeFilter(UNIT_LIST, configInfo.init_money_unit) }}</span>
        </div>
      </TransitionGroup>
    </div> -->
  </div>
</template>
<script setup lang="ts">
import { computed, onBeforeUnmount, onMounted, reactive, toRefs } from 'vue';
import { Vue3Countup } from 'vue3-countup';
import { GetLastConfig } from '@/api/config';
import { message, Modal } from 'ant-design-vue';
import { UNIT_LIST, typeFilter } from '@/helper/data';

interface State {
  configInfo: {
    id: number;
    init_name: string;
    init_money: number;
    init_money_unit: string;
    init_time: string;
    records: { id: number; record_money: number; record_time: string; record_client: string; config_id: number }[];
    surplus_money: number;
  };
  configRecords: { id: number; record_money: number; record_time: string; record_client: string; config_id: number }[];
}

const state = reactive<State>({
  configInfo: {} as State['configInfo'],
  configRecords: [],
});

const { configRecords, configInfo } = toRefs(state);

const moreOptions = computed(() => {
  return { startVal: state.configInfo.init_money };
});

const surplusMoney = computed(() => {
  return state.configInfo.surplus_money || state.configInfo.init_money;
});

async function getconfig() {
  try {
    const res = await GetLastConfig();
    if (res.length === 0) {
      Modal.info({
        title: '提示',
        content: '当前暂时没有配置内容，请配置后点击重试',
        okText: '重试',
        onOk: () => {
          window.location.reload();
        }
      })
      return false;
    } else {
      state.configInfo = res[0];
      state.configRecords = state.configInfo.records;
    }
    setTimeout(() => {
      getconfig();
    }, 200);
  } catch (e: unknown) {
    message.error(e.message);
  }
}

const timer = null;

onMounted(() => {
  getconfig();
})

onBeforeUnmount(() => {
  clearInterval(timer);
});
</script>
<style lang="scss">
.home-container{
  position: relative;
  height: 100vh;
  width: 100%;
  background-image: url(/static/bg.jpg);
  background-size: cover;
  .home-content{
    // position: absolute;
    // top: 20%;
    // left: 50%;
    // transform: translateX(-50%);
    // max-width: 90%;
    // width: 100%;
    // min-width: 800px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 4vw 3vw 0;
  }
  .home-title{
    color: #b82916;
    font-size: 8vw;
    font-weight: bold;
    text-align: left;
    width: 100%;
  }
  .home-money{
    width: 100%;
    padding: 10vh 0;
    .money-box{
      text-align: center;
      font-size: 18vw;
      color: #b82916;
    }
  }
  .home-unit{
    width: 100%;
    font-size: 8vw;
    color: #fff;
    text-align: right;
    color: #b82916;
  }
  .home-record{
    position: absolute;
    right: 0;
    bottom: 0;
    padding: 30px;
    padding-top: 0;
    // border: 1px solid #ddd;
    height: 378px + 30px;
    overflow: hidden;
    .record-list{
      margin-top: 0;
      transition: margin-top 0.5s;
    }
    .home-record-item{
      width: 13vw;
      height: 42px - 6px * 2;
      font-size: 26px;
      padding: 6px 0;
      color: #fff;
      display: flex;
      min-width: 360px;
      .item-name{
        width: 50%;
      }
      .item-money{
        width: 50%;
        text-align: right;
      }
    }
  }
}
.list-enter-active,
.list-leave-active {
  transition: all 0.5s ease;
}
.list-enter-from,
.list-leave-to {
  opacity: 0;
  transform: translateY(30px);
}
</style>
